<template>
	<div  >
		<!-- <div class="header"><a-icon type="left" class='left'/>{{baseform.name}}</div> -->
		<titleCommon :title='baseform.name'></titleCommon>
		<a-spin  :spinning="spinning"  :indicator="indicator">
			<div class='contain mt15'>
				<div class='contain-main border-b-1 ' style="padding-left: 0.1rem">
					<ul class='table_div' style="margin-top: 0">
						<li> <span class='color-yellow'>{{baseform.size | Num_splitby_thresscomma}}</span> <br> <span class='ft12 color-999'>规模（万）</span> </li>
						<li> <span class='color-yellow'>{{baseform.startingAmt | Num_splitby_thresscomma}}</span>          <br> <span class='ft12 color-999'>起投金额（万）</span> </li>
						<li> <span class='ft12'>{{baseform.type | productType}}</span>    								 <br> <span class='ft12 color-999'>产品类型 </span> </li>
						<li> <span class='ft12'>{{baseform.financingSubjectNature |financingSubjectNature}}</span>                                   		 <br> <span class='ft12 color-999'>融资主体性质</span> </li> 
						
					</ul>
					<ul class='table_div'> 
						<li> <span class='ft12'>{{baseform.cash | way_of_duifu}}</span> <br> <span class='ft12 color-999'>兑付方式</span> </li>
						<li> <span class='ft12'>{{baseform.releaseTime | formatDates}}</span>          <br> <span class='ft12 color-999'>发行时间</span> </li>
						<li> <span class='ft12'>{{baseform.issuer}}</span>    								 <br> <span class='ft12 color-999'>发行方 </span> </li>
						<li> <span class='ft12'>{{baseform.subsistingCycle}}个月</span>                                   		 <br> <span class='ft12 color-999'>存续周期</span> </li> 
					</ul>
				</div>
				<div class='contain-main ft12 lh-150'>
					<span class='color-yellow'>发行进度：</span>
					<span  v-html='baseform.issueProgress'  class='word-break-all'></span>
					<span  v-if='baseform.issueProgress=="" || baseform.issueProgress==null'>暂无</span>
				</div> 
			</div>
			<dl class='contain mt15'> 
				<dt class="contain-title border-b-1"><span>基本信息</span></dt>
				<div class='contain-main ft12 lh-200'>
					<dd> <label> 产品名称 </label> 		{{baseform.name}} </dd>
					<dd> <label> 产品类型 </label> 		{{baseform.type | productType}} </dd>
					<dd> <label> 产品规模（万）</label> 	{{baseform.size |Num_splitby_thresscomma}} </dd>
					<dd> <label> 融资主体性质 </label> 	{{baseform.financingSubjectNature |financingSubjectNature}} </dd>
					<dd> <label> 起投额（万）</label> 	{{baseform.startingAmt |Num_splitby_thresscomma}} </dd>
					<dd> <label> 存续周期 </label> 		{{baseform.subsistingCycle}}个月 </dd>
					<dd> <label> 兑付方式 </label> 		{{baseform.cash | way_of_duifu}} </dd>
					<dd> <label> 发行方 </label> 		{{baseform.issuer}} </dd>
					<dd> <label> 发行时间 </label> 		{{baseform.releaseTime | formatDates}} </dd>
					<dd> <label> 增信方 </label> 		{{baseform.increasingCredit ||  '--'}} </dd>
					<dd> <label> 增信方式 </label> 		<span >{{baseform.increasingCreditMode | increasingCreditMode}}</span>
			  											<span  v-if='baseform.increasingCreditMode==5'>{{baseform.increasingCreditModeValue}}</span>
			  		</dd>
					<dd> <label> 承销方 </label> 		{{baseform.underwriter}} </dd>
					<dd> <label> 收益描述 </label> 		<span  v-html='baseform.benefitDescription'  class=" word-break-all"></span>
			  											<span  v-if='baseform.benefitDescription==""'>--</span>
			  		</dd>
				</div>
			</dl>
			<div class='contain mt15'>
				<dt class="contain-title border-b-1"><span>产品简介</span></dt>
				<div class='contain-main ft12 lh-150'>
					<span v-html='baseform.highlight'  class=' word-break-all'></span>
					<span  v-if='baseform.highlight==""'>暂未录入</span> 
				</div>
			</div>
			<div class='contain mt15'>
				<dt class="contain-title border-b-1"><span>产品标签</span></dt>
				<ul class='contain-main ft12 tagList clear' style="padding-top: 0">
					<li v-for='item in productTagData' >{{item}}</li>
				</ul> 
			</div>
			<div class='contain mt15'  v-if='baseform.imageList && baseform.imageList.length>0'>
				<dt class="contain-title border-b-1"><span>产品结构图</span></dt>
				<div class='contain-main'>
					<img :src='imgsrc'  alt='产品结构图' style="max-width: 100%;">
				</div> 
			</div>
			<div class='contain mt15'  v-if='baseform.fileVOList && baseform.fileVOList.length>0'>
				<dt class="contain-title border-b-1"><span>产品资料</span></dt>
				<ul class='contain-main ft12 fileList '>
					<li  v-for='item in baseform.fileVOList'  @click='downloadFile(item.code)'>{{item.name}}</li>
				</ul>
			</div>
			<div class='contain mt15' v-if='baseform.faqList && baseform.faqList.length>0'>
				<ul class='questionList '>
					<li  v-for='item in baseform.faqList'  class='contain-main border-b-1'>
						<div class='ft14 fontWeight lh-150'>{{item.question}}</div>
						<p class='lh-180  ft12  lh-200'>{{item.answer}}</p>
					</li>
				</ul>
			</div>
		</a-spin>
	</div>
</template>

<script >
	import titleCommon from '@/components/titleCommon'
	import { productDetail }  from  '@/api/home/index'
	export default{
		name:'productDetail',
		data(){
			return {
				indicator: <a-icon type="loading" style="font-size: 24px" spin />,
				spinning:false,

				baseform:{},
				productTagData:[],
				imgsrc:process.env.BASE_API+'/op/fileupload/download_file?token='+sessionStorage.getItem('tokenId')+'&fileCode=',//返回流程图
			}
		},
		created(){
			let code  = this.$route.query.code
			this.pageInit(code)
		},
		methods:{
			pageInit(code){
				this.spinning = true
				productDetail(code).then((res)=>{
						if(res.data.flag == true){
							this.baseform = res.data.data

							//产品标签
	  						this.changeTag(this.baseform.tag)
	  						//返回流程图
	  						if(this.baseform.imageList && this.baseform.imageList.length>0){
	  							this.imgsrc+=this.baseform.imageList[0].code
	  						}
	                    	
						}
						this.spinning = false
				})
				.catch((err)=>{
					this.spinning = false
				})
			},
			changeTag(str){
				this.productTagData = str.slice(0,-1).split(',') 
			},
		},
		components:{
			titleCommon
		}
	}
</script>

<style scoped="scoped">
.tagList li{float: left;padding: 0.06rem 0.15rem;margin:0.1rem 0.25rem 0 0;background-color: #D6E3FF;color: #1E49A5;border-radius: 0.12rem;}	
</style>